@extends('admin.layouts.common')
@section('style')

@endsection
@section('container')
    <div class="container-fluid">
        <nav class="navbar navbar-inverse" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><i class="fa fa-beer"></i>后台管理系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">测试</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">清除缓存</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">个人信息 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">个人信息详情</a></li>
                            <li><a href="{{url('/admin/logout')}}">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
        <div class="row">
            <div class="col-xs-4 col-sm-3 col-md-2 col-lg-2">
                <div class="list-group">
                    <a href="#" class="list-group-item active">首页</a>
                    <a href="#" class="list-group-item">待办事项</a>
                    <a href="#" class="list-group-item">统计信息</a>
                </div>
            </div>
            <div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
                <div class="jumbotron">
                    <div class="container">
                        <h1>首页</h1>

                        <p>Contents...</p>

                        <form id="form" action="">
                            <input type="file" id="file">
                        </form>
                        <p id="percent"></p>
                    </div>
                </div>
            </div>
            {{--<iframe class="col-xs-8 col-sm-9 col-md-10 col-lg-10" src="http://www.baidu.com" id="myiframe"--}}
            {{--onload="changeFrameHeight()" frameborder="0"></iframe>--}}
        </div>
    </div>

@endsection
@section('script')
    <script>
        function changeFrameHeight() {
            var ifm = document.getElementById("myiframe");
            ifm.height = document.documentElement.clientHeight - 100;
        }
        window.onresize = function () {
            changeFrameHeight();
        };
        $("#file").change(function () {
            var domFile = $(this)[0].files[0]

            //将form对象直接作为参数 new FormData对象.
            var formData = new FormData($('#form')[0]);
            //追加file 对象
            formData.append('file', domFile);
            $.ajax({
                url: '{{url('/admin/test')}}',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (msg) {

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
//                console.log(XMLHttpRequest);
                },
                xhr: function (msg) {
                    var xhr = jQuery.ajaxSettings.xhr();
                    console.log(xhr);
                    xhr.upload.onprogress = function (ev) {
                        if (ev.lengthComputable) {
                            var percent = parseInt(100 * ev.loaded / ev.total);
//                            console.log(percent);
                            $('#percent').html(percent + '%');
                        }
                    };
                    xhr.upload.onload = function () {
//                        alert('finish downloading')
                    };
                    return xhr;
                }
            });
        })

    </script>
@endsection
